//首页的less样式文件
@import "common";
// @import 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个样式文件引入到html页面里面

body {


	min-width: 320px;
	/* 最小的宽度 */
	max-width: 15rem;
	/* 最大宽度 不必要设置 */
	margin: 0 auto;
	/* 字体样式，不是苹果用后面 的字体 */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: (30rem /@baseFont);
	line-height: 1.5;
	background-color: #fff;
}



img {
	border: none;
	display: block;
}

ul,p,ol,li {
	margin: 0;
	padding: 0;
	list-style: none;
}


a {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}

@baseFont: 50;
#head {
	/* 高度先写死 */
	// top:0;
	width: 15rem;
	height: (90rem/@baseFont);
	/* 让他始终在最上面*/
	position: relative;
	z-index: 3;
	// position: fixed;
	background-color: rgba(53, 53, 53, 0.4);
	// height: (100rem/@baseFont);


	
ul>li {
	color: #fff;
	float: left;
	height: (90rem/@baseFont);
	line-height: (90rem/@baseFont);
	background-color: rgba(53, 53, 53, 0.2);
	text-align: center;
	}
ul li:nth-child(1) {
	width: 10%;
}
ul li:nth-child(1) span {
	// color: rgb(237, 112, 152);
	font-size: (75rem/@baseFont);
}

ul li:nth-child(2) {
	width: 60%;
}

ul li:nth-child(2) span {
	float: right;
	padding-right: (20rem/@baseFont);
	font-size: (55rem/@baseFont);
}

ul li:nth-child(3) {
	width: 20%;
}

ul li:nth-child(3) span {
	font-size: (80rem/@baseFont);

}

ul li:nth-child(4) {
	width: 10%;
	color: #ebebeb;
	// background-color: rgb(237, 112, 152);

}

ul li:nth-child(4) span {
	font-size: (60rem/@baseFont);

}
span{
	color: #fff;
}

}

    #box{
            position: fixed;
            top: 300px;
            left: 0;
            padding: 40px;
            font-size: 30px;
            background-color: rgb(132, 231, 93);
            z-index: 4;
            display: none;
        }





/* 视频 */
.video {
	width: (750rem/@baseFont);

	overflow: hidden;
	video{
		width: 15rem;
		
	}
}



/* 发送  */
.jianzhe {
	position: relative;
	 z-index: 3;
	// position: fixed;
	// margin-top: (200rem /@baseFont);;
	background-color: #fff;
	
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (100rem /@baseFont);
	
	display: flex;
	

/* tab标签 */
  .tab {
            width: 15rem;
            
			}

				.tt {
				// height: (80rem/@baseFont);
				/* 下移遮住下面的线 */
				border-bottom: (2rem/@baseFont) solid rgb(237, 112, 152);
				display: flex;
				width: 100%;
				.wenzi {
				
				width: 50%;
				display: flex;
				.cur{
					border-top: (2rem/@baseFont) solid rgb(237, 112, 152);
					background-color: #fff;
					color: rgb(237, 112, 152);
					font-weight: bold;
					margin-bottom: -(2rem/@baseFont);
	
					text-align: center;
				}
				
				span {
						
						text-align: center;
				        line-height: (100rem/@baseFont);
				        font-size: (32rem/@baseFont);
					
					}	
	
				.jj{
					width: 50%;
					text-align: center;
				
				
				}
			
			
			
				.plun{
				width: 50%;
				text-align: center;
					
				}
					}
			
					/* 搜索框 */
					.search {
					/* 父 */
					width: 50%;
					position: relative;
					flex: 1;
					display: flex;
					overflow: hidden;
					
					.sousuo-box{
					// left:50%;
					margin: 0 auto;
					// justify-content: center;
					width: 80%;
					// position: absolute;
					display: flex;
					// overflow: hidden;
					// height: (100rem/@baseFont);
					
					.biao{
						// float: left;
						
						width: 50%;
						input{
							
							outline: none;
							//隐藏光标
							caret-color: transparent;
							border: 1px solid #D0D0D0;
							height: (66rem/@baseFont);
							
							width: (200rem/@baseFont);
							border-radius: (33rem/@baseFont);
							margin: (16rem/@baseFont) (10rem/@baseFont);
							background-color: #dcdcdc;
							font-size: (25rem/@baseFont);
							padding-left: (20rem/@baseFont);
						}
					}
					
					.danmo{
						position: relative;
						// margin-right: (80rem/@baseFont);
						// float: right;
						width: 100%;
						// background-color: red;
						// overflow: hidden;
						border-radius: (33rem/@baseFont);
						margin: (16rem/@baseFont) (10rem/@baseFont);
						background-color: #f5f5f5;
						padding-left: (50rem/@baseFont);		
						span{
							position: absolute;
							left:25%;
				
							top: 0;
							font-size: (50rem/@baseFont);
						}
					}
				
				}
				
				span{
					
					position: absolute;
					top: (30rem/@baseFont);
					left: (25rem/@baseFont);
					font-size: (30rem/@baseFont);
				}
				
			 }
			
        }


	/* up主的信息 */
	.tc {
				// width: 15rem;
				border: (2rem/@baseFont) solid rgb(237, 112, 152);
	            border-top: none;
				// width: 15rem;
	            height: (800rem/@baseFont);
	            
	            // text-align: center;
	            display: none;
				}
		.rmpl{
			
			display: flex;
			width: 100%;
			background-color: rgba(240, 240, 240, 0.7);
			font-size: (30rem/@baseFont);
			li{
				width: 50%;
			}
			li:nth-child(2) span{
				float: right;
				color: #a6a6a6;
			}
		}
		.pplun{
			
		}
		
		.nrong{
				width: 100%;
				display: flex;
				background-color: rgba(240, 240, 240, 0.7);
				// height:  (100rem/@baseFont);
				border-bottom:(5rem/@baseFont) solid #D0D0D0;
					.plunqu{
						
					}
					.xingxi{
						
						
					}
					.icon-icon-test10{
						color: rgb(237, 173, 10);
					}
					.icon-UPzhu{
						color: rgb(237, 112, 152);
					}
					
					.time{
						font-weight: lighter;
					}
					.zhiding{
						
						color: rgb(237, 112, 152);
						border:(2rem/@baseFont) solid  rgb(237, 112, 152);
					}
					.toux{
						width: 20%;
						text-align: center;
					}
					.toux>span{
						
						font-size: (80rem/@baseFont);
					}
					.xingxi{
						width: 70%;
						
					}
					.xingxi>li{
						font-size: (30rem/@baseFont);
						// text-align: center;
						height: (50rem/@baseFont);
						
							
					}
					.xingxi>li:nth-child(1){
						padding-top: (10rem/@baseFont);
						.iconfont{
							font-size: (45rem/@baseFont);
						}
					}
					
					.xingxi>li:nth-child(2){
					.iconfont{
						letter-spacing: (5rem/@baseFont);
						font-size: (50rem/@baseFont);
					}
					.szz{
						font-size: (40rem/@baseFont);
					}
					// padding-top: (10rem/@baseFont);
					.icon-sandian2{
						font-size: (50rem/@baseFont);
						float: right;
					}
				}
					
					
		
		     }

	.up{
			width: 100%;
			display: flex;
			background-color: #fff;
			height:  (110rem/@baseFont);
			
		
				.toux{
					width: 20%;
					text-align: center;
				}
				.toux>span{
					
					font-size: (80rem/@baseFont);
				}
				
				.xingxi{
					width: 50%;
					
				}
				.xingxi>li{
					font-size: (30rem/@baseFont);
					// text-align: center;
					height: (50rem/@baseFont);
					
						
				}
				.xingxi>li:nth-child(1){
					padding-top: (10rem/@baseFont);
				}
				
				.mz{
					
					font-size: (35rem/@baseFont);
				}
				.xia{
					color: #D0D0D0;
				}
				.guanzhu{
					
					// background-color: rgb(237, 112, 152);
					width: 30%;
					position: relative;
					// text-align: center;
					
				}
				.gx{
					background-color: rgb(237, 112, 152);
					width: 60%;
					position: absolute;
					top:25%;
					left: 25%;
					border: (2rem/@baseFont) solid rgb(237, 112, 152);
					border-radius: 10%;
				}
				.gx>span{
					
					letter-spacing: (10rem/@baseFont) ;
					font-size: (35rem/@baseFont);
					color: #fff;
				
				}
	
         }
		
	/* 活动 */
	.activity{
		width: 100%;
		display: flex;
		background-color: #fff;
		height:  (60rem/@baseFont);
		.huodong{
			margin-left: (15rem/@baseFont);
			width: 10%;
			background-color: #D0D0D0;
			border-radius: 20%;
			text-align: center;
			
			span{
				line-height: (60rem/@baseFont);
				font-weight: bolder;
				color: rgb(237, 112, 152);
			}
			
		}
		.biaoti{
			width: 80%;
			margin-left: (20rem/@baseFont);
			

			span{
				line-height: (60rem/@baseFont);
			}
		}
		.tubiao{
			width: 10%;
			text-align: center;
			.down{
				font-size: (40rem/@baseFont);
			}
		}
		.up{
			
			display: none;
			font-size: (40rem/@baseFont);
			
		}
		
		
	}
	
	.jieshao{
		
		// border: (2rem/@baseFont) solid rgb(237, 112, 152);
		border-top: none;
		// width: 15rem;
		// height: (100rem/@baseFont);
		overflow: hidden;
		width: 15rem;
		// text-align: center;
		display: none;
		// z-index: 3;
		width: 15rem;
		background-color: #fff;
		span{
			padding-left: (5rem/@baseFont);
		}
		.icon-RectangleCopy{
			font-size: (35rem/@baseFont);
		}
		.icon-jinzhi{
			color: red;
		}
	}
	
	

	
		
		
        /* 如何让一个html盒子隐藏？ */

        /* display:none;
        隐藏盒子，而且不占位置。(用的最多) overflow:hidden;
        隐藏盒子超出的部分 opacity:0;
        隐藏盒子，而且占位置。 visibility:hidden;

        隐藏盒子，而且占位置。 Position/top/left/…-999px 隐藏盒子，而且占位 */
        
		.show { 
            display: block;
        }
  
	
	
	

}



.context-one{
	//让中间内容置于最下面！！！
	// z-index: -1;
	// position: relative;
	width: (750rem/@baseFont);
	
	//flex-wrap实现弹性盒自动换行
	display: flex;
	flex-wrap: wrap;
	height: (120rem/@baseFont);
	background-color: #fff;
	border-bottom:(5rem/@baseFont) solid #D0D0D0;
	.view{
		position: relative;
		// padding-left: (10rem/@baseFont);
		width: (100rem/@baseFont);
		// overflow: hidden;
		
		display: inline-block;
			
		flex-grow: 1;
		//防止被挤压
		flex-shrink: 0;
	
	}
	
	.xuanfu{

		height:(50rem/@baseFont) ;
		text-align: center;
		//flex-wrap实现弹性盒自动换行
		display: flex;
		flex-wrap: wrap;
		
		width: 100%;
		left: 0;
		li{
			width: 20%;
		
		}

		span{
			font-weight: bolder;
			// color:rgb(237, 112, 152);
			font-size: (50rem/@baseFont) ;
		}

	}
	}
	
	
/* 内容二  tab1的内容*/
.context-ttwo{
	width: 15rem;
	display: flex;
	flex-wrap: wrap;
	height: (100rem/@baseFont);
	

	ul{
		
		width: 15rem;
		height: (260rem/@baseFont);
		background-color: #fff;
		overflow: hidden;
		border-bottom: (2rem/@baseFont) solid #dcdcdc;

	
	.r{
		margin-top:(10rem/@baseFont);
		float: right;
		width: 50%;
		height: (100rem/@baseFont);
		
		li{
			display: flex;
			width: 100%;
			height: (60rem/@baseFont);
		.bottom{
			position: relative;
			width: 100%;		
			span{
				padding-bottom: ;
				font-size: (40rem/@baseFont);
				float: left;
				
			}
			p{
				
				margin-left: (4rem/@baseFont);
				float: left;
				
			}
			
			.icon-diandiandianshu{

				margin-left: (40rem/@baseFont);
				font-size: (30rem/@baseFont);
			}
			
		}
		
		
		.author{

			width: 100%;

			margin-top: (5rem/@baseFont);
			span{
				font-size: (40rem/@baseFont);
			
				float: left;
				
			}
			p{
				float: left;
				margin-left: (5rem/@baseFont);
			}
		}
		
		.bof{
			width: 40%;
			background-color:rgba(222, 134, 9, 0.2);
			text-align: center;
			margin-top: (25rem/@baseFont);
			margin-left: (5rem/@baseFont);
			p{
				color: #de6c3f;
				font-size: (25rem/@baseFont);
			}
		}
		}
	
	}	
	
	li:nth-child(1){
		color:green;
		
	}
	
	
	.l{
	
		float: left;
		width: 48%;

		img{
			margin-top:(20rem/@baseFont);
			margin-left:(8rem/@baseFont);
			width: 100%;
		}
	}
	}
}



/* footer */


	
.search-wrap {
	position: fixed;
	width: 15rem;
	height: (100rem /@baseFont);
	background-color: #fff;
	z-index: 3;
	bottom: 0;
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
	
	
	// position: relative;
	 z-index: 3;
	/* flex布局 */
	display: flex;
	position: fixed;
	margin-top: (100rem /@baseFont);
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	// height: (100rem /@baseFont);
	
	background-color: #fff;
	

/* 头像 */
	.search-touxiang {
	/* 相对定位 */
	// position: absolute;
	// top: 0;
	// left: 0;

	
	width: (80rem/@baseFont);
	height: (100rem/@baseFont);
	
	/* 头像图 */
	a>span {
		font-size: (70rem/@baseFont);	
		padding-left: (5rem/@baseFont);
		}


	}


/* 搜索框 */
	.search {
	/* 父 */
	position: relative;
	flex: 1;

	
	
	.sousuo-box{
		
		height: (100rem/@baseFont);
		
		
	}
	
	span{
		
		position: absolute;
		top: (30rem/@baseFont);
		left: (25rem/@baseFont);
		font-size: (30rem/@baseFont);
	}
	input{
		outline: none;
		
		border: 0;
		height: (66rem/@baseFont);
		
		width: 100%;
		border-radius: (33rem/@baseFont);
		margin: (16rem/@baseFont) (10rem/@baseFont);
		background-color: #dcdcdc;
		font-size: (25rem/@baseFont);
		padding-left: (55rem/@baseFont);
	}
	}
 }
 